<template>
    <div>
        <center><h3>个人信息</h3></center>
        <el-form ref="updateForm"  :model="patient"  :rules="rules" label-width="80px" class="login-box">

            <el-form-item label="账号"  class="out"  >
                <el-input readonly="readonly" v-model="patient.id" type="text" class="inputs" placeholder="请输入账号"  />
            </el-form-item>
            <el-form-item label="姓名" class="out" prop="name" >
                <el-input   v-model="patient.name"  type="text" class="inputs"  placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="性别"  class="out" prop="sex">
            <el-radio-group readonly="readonly" v-model="patient.sex">
                <el-radio :label="1" style="margin-left: 50px" >男</el-radio>
                <el-radio :label="2" >女</el-radio>
            </el-radio-group>
        </el-form-item>
            <el-form-item label="身份证号" class="out"  prop="idcard">
                <el-input  v-model="patient.idcard" type="text" class="inputs" placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="年龄" class="out"  prop="age">
                <el-input  v-model="patient.age" type="text" class="inputs" placeholder="请输入年龄"/>
            </el-form-item>
            <el-form-item label="电话" class="out" prop="phone">
                <el-input  readonly="readonly" v-model="patient.phone" type="text" class="inputs" placeholder="请输入电话"/>
            </el-form-item>
            <el-form-item label="地址" class="out" prop="address" >
                <el-input  v-model="patient.address" type="text" class="inputs" placeholder="请输入地址"/>
            </el-form-item>
            <center>
                <el-form-item>
                    <el-button type="primary" @click="OnSubmit('updateForm')" >保存修改</el-button>
                </el-form-item>
            </center>
        </el-form>
    </div>
</template>

<script>
    import axios from  'axios'
    import {ElMessage} from "element-plus";
    export default {
        name: "PatientUser",
        data(){
            var isNum = (rule, value, callback) => {
                const age= /^[0-9]*$/
                if (!age.test(value)) {
                    callback(new Error('年龄只能为数字'))
                }else{
                    callback()
                }
            };
            return{

                patientId:'',
                patient: {
                    deleted:0,
                    gmtCreate:'',
                    gmtUpdate:'',
                    id: '',
                    name: '',
                    idcard:'',
                    sex:'',
                    age:'',
                    login_name:'',
                    address:'',
                    password:'',
                    phone:'',
                },
                rules:{
                    name:[
                        {required:true,message:"名称不可为空",trigger:'blur'}
                    ],
                    idcard: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                        { min: 18, max: 18, message: '请正确输入身份证号', trigger: 'blur' },
                    ],
                    sex:[
                        {required:true,message:"性别不可为空",trigger:'blur'}
                    ],
                    age:[
                        {required:true,message:"年龄不可为空",trigger:'blur'},
                        {validator:isNum,trigger: 'blur'}
                    ],
                    phone: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                        { min: 11, max: 11, message: '请正确输入电话号码', trigger: 'blur' },
                    ],
                    address: [
                        {required:true,message:"地址不可为空",trigger:'blur'},
                    ],

                },

            };
        },
        created(){
            this.create();
        },
        methods: {
            create(){
                this.patientId=localStorage.getItem("id");
                axios.get("http://119.29.60.153:8001/doctorservice/patient-info/GetPatientById/"+this.patientId).then(resp=> {
                    this.patient=resp.data.data.patient;
                })


            },
            OnSubmit(formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                axios.post("http://119.29.60.153:8001/doctorservice/patient-info/updatePatient",this.patient).then(resp=> {
                    if(resp.data.success==true){
                        alert("修改成功!");
                        localStorage.setItem("name", this.patient.name);
                        location.reload();
                    }
                    else {
                        ElMessage.error("修改失败!");

                    }
                })
                    }else {
                        return false;
                    }
                })

            },

        }
    }
</script>

<style scoped>
    .login-box{

        padding: 10px 35px 15px 35px;

    }
    .out{
        margin-left: 350px;
    }
    .inputs{
        width: 500px;
    }
    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

</style>